<template>
  <div class="app-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-tabs v-model="activeTab" type="border-card">
        <el-tab-pane label="基础信息" name="basic">
          <keep-alive>
            <div> <div class="el-form-item">企业基本信息</div>
              <el-form-item class="line-item" label="企业名称" prop="name">
                <el-input v-model="form.name" placeholder="请输入企业名称" />
              </el-form-item>
              <el-form-item label="企业类型" prop="member_type" class="marginTop30">
                <el-select v-model="form.member_type" clearable placeholder="请选择">
                  <el-option v-for="(types, index) in enterpriseTypes" :key="index" :label="types" :value="parseInt(index)">{{ types }}</el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="line-item" label="企业性质" prop="enterprise_type">
                <el-select v-model="form.enterprise_type" placeholder="请选择" class="select-item">
                  <el-option
                    label="请选择"
                    :value="0"
                  />
                  <el-option
                    v-for="(item,index) in handleInfos.enterprise_typeb"
                    :key="index"
                    :label="item"
                    :value="parseInt(index)"
                  />
                </el-select>
              </el-form-item>
              <el-form-item class="line-item" label="会员类型" prop="type">
                <el-select v-model="form.type" placeholder="请选择" class="select-item">
                  <el-option
                    label="请选择"
                    :value="0"
                  />
                  <el-option
                    v-for="(item,index) in handleInfos.enterprise_type"
                    :key="index"
                    :label="item"
                    :value="parseInt(index)"
                  />
                </el-select>
              </el-form-item>
              <el-form-item class="line-item" label="主营产品" prop="products">
                <el-input v-model="form.products" placeholder="请输入主营产品" />
              </el-form-item>
              <el-form-item class="line-item" label="厂房面积" prop="size">
                <el-input v-model="form.size" placeholder="请输入厂房面积" />
              </el-form-item>
              <el-form-item class="line-item" label="注册资本" prop="capital">
                <el-input v-model="form.capital" placeholder="请输入注册资本" />
              </el-form-item>
              <el-form-item class="line-item" label="法定代表人" prop="leaderman">
                <el-input v-model="form.leaderman" placeholder="请输入法定代表人" />
              </el-form-item>
              <el-form-item class="line-item" label="建立时间" prop="foundtime">
                <el-date-picker
                  v-model="form.foundtime"
                  class="select-item"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                  placeholder="请输入建立时间"
                />
              </el-form-item>
              <el-form-item class="line-item" label="纳税人性质" prop="taxpayer_type">
                <el-select v-model="form.taxpayer_type" placeholder="请选择" class="select-item">
                  <el-option
                    label="请选择"
                    :value="0"
                  />
                  <el-option
                    v-for="(item,index) in handleInfos.taxpayer_type"
                    :key="index"
                    :label="item"
                    :value="parseInt(index)"
                  />
                </el-select>
              </el-form-item>
              <div class="el-form-item">企业地址信息</div>
              <el-form-item class="line-item" label="企业官网" prop="url">
                <el-input v-model="form.url" placeholder="企业官网" />
              </el-form-item>
              <el-form-item class="line-item" label="传真" prop="fax">
                <el-input v-model="form.fax" placeholder="请输入传真" />
              </el-form-item>
              <el-form-item class="line-item" label="邮政编号" prop="post_code">
                <el-input v-model="form.post_code" placeholder="请输入邮政编号" />
              </el-form-item>
              <el-form-item class="line-item" label="主要行业" prop="style">
                <el-input v-model="form.style" placeholder="请输入主要行业" />
              </el-form-item>
              <el-form-item class="line-item" label="企业电话" prop="tel">
                <el-input v-model="form.tel" placeholder="请输入企业电话" />
              </el-form-item>
              <div />
              <el-form-item class="line-item" label="所在地区" prop="area">
                <areaSelect v-model="areaArr" :show="true" styles="width:250px" />
              </el-form-item>
              <el-form-item class="line-item" label="详细地址" prop="address">
                <el-input v-model="form.address" placeholder="请输入详细地址" />
              </el-form-item>
              <el-form-item label="企业介绍" prop="description">
                <el-input v-model="form.description" type="textarea" :rows="2" placeholder="请输入企业介绍" />
              </el-form-item>
              <el-form-item label="备注信息" prop="remark">
                <el-input v-model="form.remark" type="textarea" :rows="2" placeholder="请输入备注信息" />
              </el-form-item>
              <el-form-item class="line-item" label="状态" prop="sex">
                <el-radio-group v-model="form.isverify">
                  <el-radio v-for="(item,index) in verifyLable" :key="index" :label="parseInt(index)">{{ item }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
            </div>
          </keep-alive>
        </el-tab-pane>
        <el-tab-pane label="联系信息" name="account">
          <keep-alive>
            <div>
              <el-form-item class="line-item" label="联系人姓名" prop="linkman ">
                <el-input v-model="form.linkman " placeholder="请输入姓名" />
              </el-form-item>
              <el-form-item class="line-item" label="联系人手机号" prop="mobile">
                <el-input v-model="form.mobile" placeholder="请输入联系人手机号" />
              </el-form-item>
              <el-form-item class="line-item" label="邮箱" prop="email">
                <el-input v-model="form.email" placeholder="请输入邮箱" />
              </el-form-item>
              <el-form-item class="line-item" label="性别" prop="sex">
                <el-radio-group v-model="form.sex">
                  <el-radio v-for="(item,index) in serLable" :key="index" :label="parseInt(index)">{{ item }}
                  </el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item class="line-item" label="部门" prop="department">
                <el-input v-model="form.department" placeholder="请输入部门" />
              </el-form-item>
              <el-form-item class="line-item" label="职位" prop="job">
                <el-input v-model="form.job" placeholder="请输入职位" />
              </el-form-item>
              <el-form-item class="line-item" label="微信号" prop="wxnumber">
                <el-input v-model="form.wxnumber" placeholder="请输入微信号" />
              </el-form-item>
              <el-form-item class="line-item" label="联系地址" prop="linkaddress">
                <el-input v-model="form.linkaddress" placeholder="请输入职位" />
              </el-form-item>
            </div>
          </keep-alive>
        </el-tab-pane>
        <el-tab-pane label="证件信息" name="address">
          <keep-alive>
            <div>
              <div class="el-form-item">企业证照信息</div>
              <el-form-item label="证件照片" prop="number_image">
                <uploadImg v-model="form.number_image" />
              </el-form-item>
              <el-form-item label="企业LOGO图片" prop="logo">
                <uploadImg v-model="form.logo" />
              </el-form-item>
            </div></keep-alive>
        </el-tab-pane>
      </el-tabs>
      <el-form-item class="button-item">
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import areaSelect from '@/components/Address/areaSelect'
import { edit, rows, handleBefore } from '@/api/user'
import uploadImg from '@/components/Upload/uploadImg'
import { notifyError, notifySuccess } from '@/utils/message'
export default {
  components: { uploadImg, areaSelect },
  beforeRouteLeave(to, from, next) {
    to.meta.noCache = true
    next()
  },
  data() {
    return {
      cateList: {},
      radioLable: { 1: '是', 2: '否' },
      serLable: { 1: '男', 2: '女' },
      verifyLable: { 1: '正常', 2: '禁用' },
      handleType: 'add',
      areaArr: [null, null, null],
      enterpriseTypes: {},
      form: {
        id: null,
        type: null,
        member_type: null,
        isverify: null,
        name: '',
        enterprise_type: null,
        products: '',
        size: '',
        capital: '',
        cash: '',
        url: '',
        isfamous: 2,
        province_id: '',
        city_id: '',
        area_id: '',
        address: '',
        description: '',
        remark: '',
        logo: '',
        number_image: '',
        tel: '',
        foundtime: '',
        fax: '',
        post_code: '',
        member_ship: null,
        style: '',
        taxpayer_type: null,
        leaderman: '',
        linkman: '',
        mobile: '',
        email: '',
        sex: 1,
        department: '',
        job: '',
        wxnumber: '',
        linkaddress: ''
      },
      rules: {
        member_type: [{ required: true, message: '企业类型', trigger: 'change' }],
        type: [{ required: true, message: '会员类型', trigger: 'change' }],
        ac_id: [{ required: true, message: '请选择分类', trigger: 'change' }],
        name: [{ required: true, message: '企业名称' }],
        image: [{ required: true, message: '图片不能为空', trigger: 'blur' }],
        content: [{ required: true, message: '内容不能为空', trigger: 'blur' }],
        keywords: [{ required: true, message: '关键词不能为空', trigger: 'blur' }],
        // description: [{ required: true, message: '描述不能为空', trigger: 'blur' }],
        isshow: [{ required: true, message: '是否显示不能为空', trigger: 'change' }]
      },
      activeTab: 'basic',
      handleInfos: {
        handleInfos: {}
      }
    }
  },
  created(options) {
    if (this.$route.query.id) {
      this.handleType = 'edit'
      this.rowsinfo(this.$route.query.id)
    }
    this.handleInfo()
  },
  methods: {
    // 处理前数据
    handleInfo() {
      handleBefore().then(res => {
        this.handleInfos = res.data
        this.enterpriseTypes = res.data.enterprise_member_type
      })
    },
    // 提交按钮
    onSubmit() {
      const that = this
      that.form.province_id = that.areaArr[0]
      that.form.city_id = that.areaArr[1]
      that.form.area_id = that.areaArr[2]
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (that.form.type === 0) {
            notifyError('请选择会员类型')
            return false
          }
          that.hadleEdit()
        }
      })
    },
    // 编辑操作
    hadleEdit() {
      edit(this.form.id,
        this.form.type,
        this.form.isverify,
        this.form.name,
        this.form.enterprise_type,
        this.form.products,
        this.form.size,
        this.form.capital,
        this.form.cash,
        this.form.url,
        this.form.isfamous,
        this.form.province_id,
        this.form.city_id,
        this.form.area_id,
        this.form.address,
        this.form.description,
        this.form.remark,
        this.form.logo,
        this.form.number_image,
        this.form.tel,
        this.form.foundtime,
        this.form.fax,
        this.form.post_code,
        this.form.member_ship,
        this.form.style,
        this.form.taxpayer_type,
        this.form.leaderman,
        this.form.linkman,
        this.form.mobile,
        this.form.email,
        this.form.sex,
        this.form.department,
        this.form.job,
        this.form.wxnumber,
        this.form.linkaddress, this.form.member_type).then(res => {
        notifySuccess(res.msg || '保存成功')
        this.$router.push({ name: 'UsersIndex', query: { keyword: this.form.name }})
      })
    },
    // 获取编辑信息
    rowsinfo(id) {
      var that = this
      rows(id).then(res => {
        that.form = res.data
        that.form.logo = res.data.logo.url
        that.form.number_image = res.data.number_image.url
        that.areaArr = [res.data.province_id, res.data.city_id, res.data.area_id]
      })
    }
  }
}
</script>
<style scoped>
.line-item{ width: 370px; display: inline-block;}
.select-item{  width: 250px;}
.button-item{    margin-top: 20px;    text-align: center;}
.app-container{    max-width: 1200px;}
.line{  text-align: center;}
</style>

